<template>
  <div class="box">
       <div>
        <label class="label" style="width: 20px;" for="">省 </label>
        <el-select v-model="province" filterable size="small" @change="provinceChange" class="handle-search mr20">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in provinceList" :key="item.label" :label="item.label" :value="item.label"></el-option>
        </el-select>
      </div>
      <div>
        <label class="label" style="width: 20px;" for="">市 </label>
        <el-select v-model="city" filterable size="small" @change="cityChang" class="handle-search mr20">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in cityList" :key="item.label" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </div>

      <div>
        <label class="label" style="width: 20px;" for="">区 </label>
        <el-select v-model="area" filterable size="small" class="handle-search mr20">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in areaList" :key="item.label" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </div>
  </div>
</template>

<script>
import area from '../util/area'
export default {
    name:"cityarea",
    data(){
           return{
         
        province: '',
        city: '',
        area: '',
        list: [],
        provinceList: [],
        cityList: [],
        areaList: [],
           }
    },
     mounted() {
      
      this.provinceList = area.map(item => {
        return item
      })
    },

     watch: {
      province() {
        if (this.province == '') {
          this.cityList = []
        }
      },
      city() {
        if (this.city == '') {
          this.areaList = []
        }
      }

    },
methods:{
     provinceChange() {
        this.city = '';
        this.area = '';
        if (this.province != '') {
          let index = this.provinceList.findIndex(item => {
            return item.label == this.province
          })
          this.cityList = this.provinceList[index].children.map(item => {
            return item
          })
        } 

      },
      cityChang() {
        this.area = ''
        if (this.city != '') {
          let index = this.cityList.findIndex(item => {
            return item.label == this.city
          })
          this.areaList = this.cityList[index].children.map(item => {
            return item
          })
        } 
      },
}
}
</script>

<style lang="scss" scoped>

.box{
    display: flex;
}
.mr20 {
    margin: 0 20px;
}
 .handle-search{
     width: 185px;
 }
</style>